<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style>
        body{
            background-color: #102447;
        }
    </style>
</head>

<body>
<div id="content" style="text-align: center;">
</div>
<script type="text/javascript" src="../js/jquery-3.2.1.min.js"></script>
<script src="../js/d3.js" charset="utf-8" type="text/javascript"></script>
<script src="../js/ghca_charts.js" charset="utf-8" type="text/javascript"></script>
<script src="../js/room2d.js" charset="utf-8" type="text/javascript"></script>
<script src="../data/room2d.js" charset="utf-8" type="text/javascript"></script>
<script>
    var container;
    const EvEvent = room2d.events.evEvent;
    const Biz = room2d.biz;
    var biz;
    var con;
    var topCon = {};
    var isDebug = false;
    var params = window.parent.ev_room2d_interface_getParams();

    $(document).ready(function () {
        loadSvg();
    });

    function init() {
        var g_Array = $("#control g");

        // Scale();
        SvgScale();
        for(var i = 0 ; i < g_Array.length ; i++){
            g_Array[i].addEventListener("mouseover",createTips);
            g_Array[i].addEventListener("mouseout",removeTips);
            if(g_Array[i].id === params.svgId){
            // if(g_Array[i].id === "hh_DC2_3F_jf_03"){
                var temp = g_Array[i].children[0];
                var x = temp.getAttribute("x");
                var y = temp.getAttribute("y");
                var width = temp.getAttribute("width");
                var height = temp.getAttribute("height");
                topCon["x"] = x;
                topCon["y"] = y;
                topCon["width"] = width;
                topCon["height"] = height;
            }
        }
        
        ghca_charts.global.outerPlugins = {
            chartMap:{
                "room":room2d.view.component.charts.room
            },
            pluginMap:{
                "rect":room2d.view.elements.plugins.nodes.rect,
                "jiguinode":room2d.view.elements.plugins.nodes.jiguiNode
            }
        }

        if(isDebug) {
            biz = new Biz("hh_DC2_3F_jf_03", {bizConfig:testBizConfig, bizData:testBizData}, false, {x:topCon.x, y:topCon.y, width:topCon.width, height:topCon.height});
            biz.create();
        } else {
            biz = new Biz(params.svgId,params.roomCode, false, {x:topCon.x, y:topCon.y, width:topCon.width, height:topCon.height});
        }
    }

    function loadSvg() {
            $.get("../image/svg/"+params.svg+".svg", function(result){
            // $.get("image/svg/hh_DC2_3F.svg", function(result){
            var content = document.getElementById("content");
            content.appendChild(result.children[0]);
            init();
        });
    }

    function createTips() {
        var str = this.getAttribute("data-attribute");
        var box = this.getBBox();
        var text = makeSVG("text",{x:box.x+box.width/2,y:box.y+box.height/2});
        text.textContent = str;
        text.style.fill = "#b0b7c2";
        text.style.pointerEvents = "none";
        this.appendChild(text);
    }

    function removeTips(){
        if(this.children.length>1){
            for(var i = 0; i < this.children.length; i++){
                if(this.children[i].tagName == "text") this.removeChild(this.children[i]);
            }
        }
    }

    var SVG_NS = "http://www.w3.org/2000/svg";
    var XLINK_NS = "http://www.w3.org/1999/xlink";

    var ATTR_MAP = {
        "className": "class",
        "svgHref": "href"
    };

    var NS_MAP = {
        "svgHref": XLINK_NS
    };
    function makeSVG(tag, attributes){
        var elem = document.createElementNS(SVG_NS, tag);
        for (var attribute in attributes) {
            var name = (attribute in ATTR_MAP ? ATTR_MAP[attribute] : attribute);
            var value = attributes[attribute];
            if (attribute in NS_MAP)
                elem.setAttributeNS(NS_MAP[attribute], name, value);
            else
                elem.setAttribute(name, value);
        }
        return elem;
    }


    function getTranslate(str) {
        try{
            var reg = /translate\((.*?)\)/;
            var xy = str.match(reg)[1].split(",");
            if(xy.length<2)//IE
                xy = str.match(reg)[1].split(" ");
            return xy.length<2?[xy[0],0]:xy;
        }catch (e){
        }
        return [0,0];
    };

    function getScale(str) {
        try{
            //IE
            var scale = str.match(/scale\((.*?)\)/)[1].split(",");
            return scale.length<2?[scale[0],scale[0]]:scale;
        }catch (e){
        }
        return [1,1];
    };

    //  function focusRoom(event) {
    //     event.stopPropagation();
    //     var box = this.getBBox();
    //     console.log(box);
    //     var bodyW = document.documentElement.clientWidth;
    //     var bodyH = document.documentElement.clientHeight;
    //     var dis_x = bodyW/2 - (box.x + box.width/2);
    //     var dis_y = bodyH/2 - (box.y + box.height/2);
    //     var tranformStr = container.attr("transform");
    //     var translate = getTranslate(tranformStr);
    //     var scale = getScale(tranformStr);
    //     translate[0] = Number(translate[0]);
    //     translate[1] = Number(translate[1]);
    //     translate[0] += dis_x;
    //     translate[1] += dis_y;
    //     var timer = setTimeout(function(){
    //         container.attr("transform", "translate(" + translate + ")scale(" + scale + ")");
    //     },100);
    // }

//     function Scale() {
//         $("#Svg").mousewheel(function (event, delta) {
// //		SvgScale();
//             event.preventDefault();
// //		event.stopPropagation();
//         });
//     }

    var margin = {
            left: 0,
            top: 0,
            right: 10,
            bottom: 10
        },
        width = $("#Svg").width(), //1200
        height = $("#Svg").height(),
        g_width = 10,
        g_height = 1000;

    function SvgScale() {
        container = d3.select("#control");
        container
            .attr("x", "0")
            .attr("y", "0")
            .attr("width", g_width)
            .attr("height", g_height);
        d3.select("#Svg").call(d3.zoom()
            .scaleExtent([0.1, 10])
            .on("zoom", zoomed))
            .on("dblclick.zoom", null);
        function zoomed() {
            container.attr("transform", d3.event.transform);
        }
    }
</script>
</body>
</html>